<template>
  <el-submenu index="1">
    <template slot="title">实时路况</template>
    <el-menu-item index="1-1" @click="showStatus">
      <open-one
        theme="two-tone"
        size="27"
        :fill="['#ffffff', '#000000']"
        :strokeWidth="3"
        strokeLinejoin="miter"
        strokeLinecap="butt"
      />
      显示路况</el-menu-item
    >
    <el-menu-item index="1-2" @click="hideStatus">
      <close-one
        theme="two-tone"
        size="27"
        :fill="['#ffffff', '#000000']"
        :strokeWidth="3"
        strokeLinejoin="miter"
        strokeLinecap="butt"
      />
      关闭路况</el-menu-item
    >
  </el-submenu>
</template>

<script>
import { mapState } from 'vuex'
import { OpenOne, CloseOne } from '@icon-park/vue'
var source = null
export default {
  name: 'trafficStatus',
  components: { OpenOne, CloseOne },
  data() {
    return {}
  },
  mounted() {},
  computed: {
    // vuex中的map
    ...mapState(['map']),
  },
  methods: {
    showStatus() {
      var that = this
      /* 1.查询地图服务的线要素 */
      var service = { name: 'guanggu', layerId: 1 }
      var where = '车流量' > 0
      Query.queryByAttr({ where, service, callback: querySuccess })
      /* 2.根据查到的线要素根据车流量flow赋予不同的颜色添加到地图容器上 */
      //矢量化矢量图层layer用于高亮显示结果
      source = new ol.source.Vector({ wrapX: false })
      var layer = new ol.layer.Vector({
        source,
      })

      /* 设置线的样式 */
      function querySuccess(e) {
        // console.log(e)
        var feature = e.SFEleArray //获取到道路数组

        //初始化Zondy.Format.PolygonJSON类
        var format = new Zondy.Format.PolygonJSON()

        //将MapGIS要素JSON反序列为ol.Feature类型数组
        var features = format.read(e)

        //获取每个道路的坐标
        for (var i = 0; i < feature.length; i++) {
          var flow = Number(feature[i].AttValue[4]) //获取车流量
          var colorIndex = Math.floor(flow / 500 - 1)
          //根据车流量赋予线不同的颜色
          var color = new Array('#05de09', '#e9fb39', '#fb4f57', '#aa0314')
          //设置线的style样式
          var style = new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: color[colorIndex],
              width: 8,
            }),
          })
          // console.log(colorIndex);
          //给每个线要素设置颜色
          features[i].setStyle(style)
        }
        source.addFeatures(features) //添加到数据源里
        that.map.addLayer(layer)
      }

      /* 绘制图例 */
      /*
       * 图例数据
       */
      var dataObj = [
        {
          tname: '非常拥堵',
          color: '#aa0314',
        },
        {
          tname: '拥堵',
          color: '#fb4f57',
        },
        {
          tname: '行驶缓慢',
          color: '#e9fb39',
        },
        {
          tname: '畅通',
          color: '#05de09',
        },
      ]
      /*
       * 根据图例经纬度坐标绘制canvas
       */
      var removeData = {
        JD: 114.46,
        WD: 30.48,
      }
      var canvas = document.createElement('canvas')

      //绘制图例函数
      function drawMapTuliMethod() {
        var shape = new ol.Feature({
          geometry: new ol.geom.Point([removeData.JD, removeData.WD]),
        })

        var ctx = canvas.getContext('2d')
        var yheight = 30
        yheight += dataObj.length * 27 //计算canvas高度
        canvas.width = 100
        canvas.height = yheight

        /*设置图例样式*/
        ctx.fillStyle = '#fff'
        ctx.fillRect(0, 0, 200, yheight) //绘制底图
        ctx.font = '16px Arial'
        ctx.fillStyle = '#000'
        ctx.fillText('拥堵情况', canvas.width / 5, 25)
        for (var i = 0; i < dataObj.length; i++) {
          //实现文字前面带色块
          ctx.fillStyle = dataObj[i].color //块颜色
          ctx.fillRect(10, 60 + (i - 1) * 25, 15, 15) //颜色块：x,y,w,h

          ctx.font = '12px Arial'
          ctx.fillStyle = '#555'
          ctx.fillText(dataObj[i].tname, 30, 72 + (i - 1) * 25) //文字
        }
        //将canvas添加到样式中
        var style = new ol.style.Style({
          image: new ol.style.Icon({
            img: canvas,
            imgSize: [canvas.width, canvas.height],
          }),
        })
        shape.setStyle(style)
        layer.getSource().addFeature(shape)
      }

      drawMapTuliMethod()
    },
    hideStatus() {
      source.clear()
    },
  },
}
</script>

<style></style>
